<template>
  <div class="container">
    <div class="sear_header">
      <van-nav-bar title="搜索" left-arrow @click-left="onClickLeft" />
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="手机"
          @search="onSearch"
        />
      </form>
      {{ value }}
    </div>
    <div class="content">
      <div class="history">
        <p>历史搜索 <span class="clean">清除</span></p>
        <div>
          <span>电脑</span>
          <span>手机</span>
          <span>洗衣机</span>
        </div>
      </div>
      <div class="categroy">
        <p>品类筛选</p>
        <div>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
          <span>电脑</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { NavBar, Search } from "vant";
import axios from "axios";

Vue.use(NavBar);
Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      list: [],
    };
  },
  methods: {
    async onSearch(val) {
      let { f, wxapp, order, type, keyword } = this;
      let ret = await axios.get("/v1/list", {
        params: {
          f,
          wxapp,
          order,
          type,
          keyword,
        },
      });
      this.$router.push({
        path: "/searchlist",
      });
      console.log(ret);
    },
    onClickLeft() {
      this.$router.back();
    },
  },
  created() {
    this.f = "wxapp";
    this.wxapp = "zdmapp";
    this.order = "score";
    this.type = "good_price";
    this.keyword = this.value;
  },
};
</script>

<style lang="stylus" scoped>
.content
  width 100%
  height 6rem
  background-color #F8F8F8
  padding 0.2rem 0.1rem
  .history
    p
      font-size 0.19rem
      display flex
      justify-content space-between
      .clean
        font-size 0.14rem
        color red
    div
      padding-top 0.1rem
      padding-bottom 0.15rem
      border-bottom 1px #eee solid
      span
        color #AAAAAA
        margin-right 0.2rem
  .categroy
    margin-top 0.2rem
    p
      font-size 0.19rem
      display flex
      justify-content space-between
      .clean
        font-size 0.14rem
        color red
    div
      padding-top 0.1rem
      padding-bottom 0.15rem
      border-bottom 1px #eee solid
      span
        color #AAAAAA
        margin-right 0.2rem
</style>